<script lang="ts" setup>
import game from '@/assets/images/game.jpg';
import movie from '@/assets/images/movie.jpg';
import teleplay from '@/assets/images/teleplay.jpg';
import router from '@/router';
import { projectConfig } from '@/utils';
import Header from './components/Header.vue';
import Layout from './components/Layout.vue';

document.title = '收藏分类';

const { repository } = projectConfig;

const go = (path) => router.push('/home' + path);
</script>

<template>
  <Layout>
    <template #header>
      <Header title="收藏分类" index />
    </template>
    <div class="categray-wrap">
      <el-card @click="go('/game')">
        <el-image class="cover" :src="game" fit="cover" />
        <div class="title">游戏</div>
      </el-card>
      <el-card @click="go('/movie')">
        <el-image class="cover" :src="movie" fit="cover" />
        <div class="title">电影</div>
      </el-card>
      <el-card @click="go('/teleplay')">
        <el-image class="cover" :src="teleplay" fit="cover" />
        <div class="title">剧集</div>
      </el-card>
      <el-link :href="repository" :underline="false" target="_blank">
        <el-text class="declaration">
          <el-icon><a-icon name="gitee" /></el-icon>
          本站开源，素材收集整理于互联网<br />
          禁止商用，如有侵权，请联系删除
          <el-icon><a-icon name="open" /></el-icon>
        </el-text>
      </el-link>
    </div>
  </Layout>
</template>

<style lang="scss" scoped>
.categray-wrap {
  display: flex;
  flex-direction: column;
  // min-height: calc(100vh - 100px);
  padding: 20px;
  .el-card {
    width: 100%;
    height: calc(30vh - 30px);
    :deep(.el-card__body) {
      padding: 0;
    }
    .cover {
      width: 100%;
      height: calc(30vh - 90px);
    }
    .title {
      padding: 16px;
      letter-spacing: 2px;
      font-weight: bold;
    }
  }
  .el-card + .el-card {
    margin-top: 20px;
  }
}
.declaration {
  padding: 20px 0 0 0;
  text-align: center;
  line-height: 1.2;
  color: var(--el-text-color-placeholder);
}
</style>
